<template>
	<view class="business">
		<view class="nav d_f j_c_c a_i_c">
			<view class="text">Create my OPAI wallet</view>
			<image src="../../static/ct_0031_返回键.png" mode="" class="right" @tap="back"></image>
		</view>
		<image src="../../static/ct_0012_绿色顶.png" mode="" class="header"></image>
		<view class="box">
			<view class="title">Please fill in the order according to the mnemonics you backed up</view>
			<view class="d_f f_w_w ">
				<template v-for="(item,index) in list">
					<view :key="index" class="border" :class="item.name?'active':''" v-if="!item.name">
						{{item.name}}
					</view>
					<u-tag :text="item.name" type="success" v-else :closeable="true" @close="close(item,index)" />
				</template>

			</view>
			<view class="show"></view>
			<view class="d_f f_w_w ">
				<view v-for="(item,index) in records" :key="index" class="border" @tap="click(item,index)">
					{{item.name}}
				</view>
			</view>

		</view>
		<view class="button d_f j_c_c a_i_c" @tap="continueUp">next</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				records: [],
				list: [{}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, ],
				arr: [],
				index: 0,
			}
		},
		components: {

		},
		methods: {
			back() {
				uni.navigateBack({
					delta: 1
				});
			},
			//下一步
			continueUp() {
				let flag = true
				this.arr.map((item, index) => {
					if (item.id != this.list[index].id) {
						flag = false
					}
				})
				if (!flag) {
					uni.showToast({
						title: 'Filling error',
						icon: 'none',
						duration: 3000
					});
					return
				}

				uni.navigateTo({
					url: '/pages/index/myWallet'
				})
			},
			//获取单词
			getData() {
				this.$api.individualmywords().then(res => {
					res.data.map(item => {
						this.$set(item, 'disabled', false)
					})
					this.records = res.data
				})
			},
			click(item, index) {
				// if(item.disabled)return
				let num=0
				this.list.map((item,index)=>{
					if(!item.name){
						num=index
					}
				})
				this.list.splice(num,1)
				if(this.index==0){
					this.list.unshift(JSON.parse(JSON.stringify(item)))
				}else{
					this.list.splice(this.index,0,JSON.parse(JSON.stringify(item)))
				}
				this.index+=1
				this.records.splice(index,1)
				// this.records[index].disabled=true
			},
			close(item,index){
				this.list.splice(index,1)
				this.records.splice(item.index,0,JSON.parse(JSON.stringify(item)))
				this.list.splice(index,0,JSON.parse(JSON.stringify({})))
				this.index-=1
			},
		},
		onShow() {

		},
		onLoad(options) {
			this.getData()
			this.arr = uni.getStorageSync('records')
		},
		watch: {

		},
		computed: {

		}
	}
</script>

<style scoped lang='scss'>
	.business {
		width: 100%;
		min-height: 100%;
		background: rgb(239, 237, 238);
		position: relative;
		padding-bottom: 32rpx;

		.nav {
			width: calc(100% - 64rpx);
			height: 160rpx;
			margin-left: 32rpx;
			position: relative;
			z-index: 9999;

			.text {
				font-size: 32rpx;
				font-weight: 700;
				color: #FFFFFF;
			}

			.right {
				width: 20rpx;
				height: 32rpx;
				position: absolute;
				left: 0rpx;
				z-index: 999;
				transform: rotate(180deg);
			}
		}

		.header {
			position: absolute;
			top: 0rpx;
			width: 100%;
			height: 229rpx;
			z-index: 1;
		}

		.box {
			width: 686rpx;
			margin-left: 32rpx;
			margin-top: 100rpx;
			background-size: 100% 100%;
			padding: 64rpx 32rpx;
			background: #FFFFFF;
			border-radius: 20rpx;

			.title {
				font-weight: 700;
				font-size: 32rpx;
			}

			.show {
				width: 100%;
				border: 0.5px solid #ccc;
				margin: 32rpx 0rpx;
			}

			.border {
				/* padding: 6rpx 16rpx; */
				width: 170rpx;
				border: 1rpx solid #ccc;
				border-radius: 10rpx;
				margin-top: 32rpx;
				margin-left: 32rpx;
				min-height: 56rpx;
				min-width: 100rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 24rpx;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}

			.active {
				background: #3fb863;
				color: #FFFFFF;
			}
		}

		.button {
			width: 622rpx;
			border-radius: 40rpx;
			background: rgb(101,186,144);
			color: #FFFFFF;
			height: 100rpx;
			margin-top: 40rpx;
			font-weight: 700;
			margin-left: 64rpx;
			/* position: fixed;
			bottom: 32rpx; */
		}

	}
</style>
